<!--
 * @description  : 市管-特殊区域计划列表展示组件
 * @descriptionDetail: 市管-特殊区域计划列表展示组件
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-09-26 18:43:02
-->
<template>
  <view style="padding: 5px 10px;">
    <view @click.native="handlerPlanDetail()">
      <u-row gutter="24" class="main-part">
        <u-col span="8" class="main-title">
          特殊区域检查
        </u-col>
        <u-col span="4">
          <view :class="'status status-' + plan.status" style="width:auto;padding: 4rpx 20rpx;">
            {{ plan.statusText }}
          </view>
        </u-col>
      </u-row>
      <u-row gutter="16">
        <u-col span="4">
          <view class="part-item-info">
            <view class="sub-title">
              计划执行时间
            </view>
            <view class="main-info">
              {{ plan.planDate }}
            </view>
          </view>
        </u-col>
        <u-col span="4">
          <view class="part-item-info">
            <view class="sub-title">
              计划制定人
            </view>
            <view class="main-info">
              {{ plan.operator }}
            </view>
          </view>
        </u-col>
        <u-col span="4">
          <view class="part-item-info">
            <view class="sub-title">
              特殊区域总数
            </view>
            <view class="main-info">
              {{ plan.planCheckNum }}个
            </view>
          </view>
        </u-col>
        <u-col span="12" class="u-p-t-20">
          <view class="op-checker">
            执行人：{{ plan.executorNames }}
          </view>
        </u-col>
      </u-row>
    </view>
  </view>
</template>
<script>
import checkService from "@/service/check/check.service";
import {M_PLAN_STATUS,} from "@/service/check/mapping/enum.js";
export default {
  name: "SpecialPlanItem",
  props: {
    plan: {
      type: Object,
      default: () => {},
    },
  },
  data(){
    return {
      M_PLAN_STATUS,
    }
  },
  watch: {
    plan: {
      immediate: true,
      handler() {
        this.$forceUpdate();
      },
    },
  },
  methods:{
    // 点击查看计划详情
    handlerPlanDetail() {
      this.setRouteParam(this.plan);
      this.handlerAddPlan();
    },
    // 添加日计划
    handlerAddPlan() {
      this.$u.route('/pages/check/addSpecialAreasPlan');
    },
    // 删除计划
    delPlan(){
      this.$modal.confirm('确定要删除吗?',() => {
        checkService.deleteCheckPlan(this.plan.checkPlanUuid).then((res) => {
          this.$u.toast(res.msg);
          if(res.success){
            this.$u.route('/pages/check/specialAreasCheckList');
          }
        }).catch(err => {
          this.$u.toast(err);
        });
      });
    },
  },
}
</script>
<style lang="scss" scoped>
.main-part {
  padding-bottom: 10px;
  .main-title {
    font-size: 15px;
    font-weight: 600;
    color: $u-main-color;
  }
  .status {
    padding: 2px;
    width: 112rpx;
	height: 56rpx;
	line-height: 48rpx;
    text-align: center;
    border-radius: 28rpx;
    float: right;
    font-size: 24rpx;
  }
  // 灰色
  .status-00 {
    color: #717579; //$u-type-info
    //border: 1px solid $u-type-info;
	background: #EDEEEF;
  }
  // 蓝色
  .status-01 {
    //color: $u-type-primary;
    //border: 1px solid $u-type-primary-dark;
	color: #0079F2;
	background: #E0ECFF;
  }
  // 绿色
  .status-02 {
    // color: $u-type-success;
    // border: 1px solid $u-type-success-dark;
	color: #20AB5C;
	background: #DBF4E6;
  }
  .status-03 {
	color: #FF9E2C;
	background: #FFF3E6;
  }
}
.part-item-info {
  text-align: left;
  .sub-title {
    color: $u-tips-color;
    padding-bottom: 5px;
    font-size: 14px;
  }
  .main-info {
    color: $u-content-color;
    font-weight: 600;
    margin-bottom: 5px;
  }
}
.op-checker {
  padding: 8px 5px;
  background-color: #ecf2fd;
  border-radius: 5px;
  color: $u-content-color;
}
.oper-sty{
  padding: 15px 0px;
}
</style>
